<!--评论组件-->
<template>
  <section class="news_remark-section">
    <!--                    评论头部-->
    <div class="remark-header">
      <h2 class="remark-num">评论<span>88</span></h2>
      <div class="remark-select">
        <div class="select-1">最新</div>
        <div>|</div>
        <div class="select-2">最热</div>
      </div>
    </div>

    <!--                    评论发表-->
    <div class="remark-publish">
      <Avatar></Avatar>
      <el-input  class="publish-fence"
          v-model="comment"
          rows="2"
          type="textarea" resize="none"
          placeholder="Please input"
      />
    </div>
    <!--                    其他人的评论-->
    <el-scrollbar height="600px">
      <Comment v-for="i in 4"></Comment>
    </el-scrollbar>


  </section>
</template>

<script setup>
import Avatar from "../avatar/Avatar.vue";
import {ref} from "vue";
import Comment from "./components/Comment.vue";
const comment = ref('轻轻敲醒沉睡的心灵，让我看看你的评论。')
</script>

<style scoped>
.news_remark-section{
  width:100%;
  background-color: rgba(255, 255, 255, 1);
  /*height:94rem;*/
  border-radius: 5px;
  box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
  padding: 2rem 4rem;
  padding-bottom: 5rem;
}

.remark-header{
  display: flex;
}
.remark-num{
  font-size: 18px;
}
.remark-select{
  cursor: pointer;
  margin-top: 0.7rem;
  margin-left: 3rem;
  display: flex;
  font-family: "微软雅黑 Light";
  font-weight: bolder;
}
.select-1{
  color: black;
}
.select-2{
  color:rgba(166, 166, 166, 1);
}

.remark-publish{
  width:100%;
  height:4.5rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
  display: flex;
  justify-content: space-between;
  --el-color-primary:#909399
}

.publish-fence{
  width: 55rem;
  /*padding: 0.8rem;*/
  /*font-size:1rem;*/
  border-radius: 5px;
  color: rgba(166, 166, 166, 1);
  /*background-color: rgba(229, 229, 229, 1);*/
}
</style>
